//跳转搜索
$('.header .container .center button').on('click', function () {
  location.href = './search.html'
})
let product = {} //保存数据
// //获取商品id
function getId() {
  // file:/.html?id=9471446
  let url = location.href
  let num = url.substring(url.indexOf('?') + 1)
  console.log(num)
  let arr = num.split('=')
  console.log(arr)
  let id = arr[1]
  return id
}
//根据id调用商品详情接口 获取商品详情数据
function detail() {
  let id = getId()
  $.ajax({
    url: 'https://www.xiongmaoyouxuan.com/api/detail',
    type: 'get',
    data: {
      id
    },
    success: function (res) {
      console.log('123', res.data)
      show(res.data)
      product = {
        id: res.data.shop.id,
        name: res.data.shop.title,
        price: res.data.shop.serviceScore,
        url: res.data.shop.picUrl,
      }

    },
    error: function (error) {
      console.log(error)
    }

  })

}
detail()

//渲染数据到页面
function show(data) {
  let str = `
            <div class="left">
                        <div class="m-show">
                        <div class="mask">
                        </div>
                    <div class="up">
                        <img src="${data.detail.photo[0].url}" alt="" >
                        <img src="${data.detail.photo[1].url}" alt="">
                        <img src="${data.detail.photo[2].url}" alt="">
                        <img src="${data.detail.photo[3].url}" alt="">
                        <img src="${data.detail.photo[4].url}" alt="">
                        
                        </div>
                        </div>
                    <ul>
                        <li> <img src="${data.detail.photo[0].url}" alt=""></li>
                        <li> <img src="${data.detail.photo[1].url}" alt=""></li>
                        <li> <img src="${data.detail.photo[2].url}" alt=""></li>
                        <li> <img src="${data.detail.photo[3].url}" alt=""></li>
                        <li> <img src="${data.detail.photo[4].url}" alt=""></li>
                    </ul>
                </div>
                <div class="right">

                    <div class="describe">你好计时经济都放假你好计时经济都放假</div>
                    <div class="oPrice">原价￥14.9</div>
                    <div class="price">劵后价:￥60 <span>4元劵</span></div>
                    <div class="cart" onclick="addCart()"><button>加入购物车</button></div>
                    <div class="cart2" onclick="onCart()"><button>查看购物车</button></div>
                </div>
                <div class="glass">
                <img src="${data.detail.photo[1].url}">
                </div>

            `
  $('.detail').html(str)
  onTab()
  onGlass()

}





//选项卡的实现
/*选项卡
1. 设置点击样式
2. .清除样式
3.点击事件设置样式*/

// console.log('li',liEle)

function onTab() {
  let liEle = $('.detail .left ul>li')
  let ulEle = $('.detail .up img')
  console.log(ulEle)

  for (let i = 0; i < liEle.length; i++) {
    liEle[i].onclick = function () {
      clear() //清除样式
      this.classList.add('active')
      ulEle[i].classList.add('on')
      
       //获取地址
      let url = $(this).find('img').prop('src')
      //背景图更换图片图片
      $('.glass>img').prop('src', url)
    }

  }


}

function clear() {
  let liEle = $('.detail .left ul>li')
  let ulEle = $('.detail .up img')
  for (let i = 0; i < liEle.length; i++) {
    liEle[i].classList.remove('active')
    ulEle[i].classList.remove('on')
  }

}

//放大镜功能
function onGlass() {
  //鼠标移入事件
  $('.m-show').on('mouseover', function () {
    $('.mask').css('display', 'block')
    $('.glass').css('display', 'block')
  })
  //鼠标移除事件
  $('.m-show').on('mouseout', function () {
    $('.mask').css('display', 'none')
    $('.glass').css('display', 'none')
  })
  //背景尺寸大小
  /**
   * mask     glass
   * ---- ==  -----
   * showb     bg
   */

  let bgW = $('.glass').width() * $('.m-show').width() / $('.mask').width()
  let bgH = $('.glass').height() * $('.m-show').height() / $('.mask').height()
  console.log(bgW, bgH)
  $('.glass>img').css({
    width: bgW,
    height: bgH
  })

  //移动事件
  $('.m-show').mousemove(function (e) {
    e = e || window.event
    let x = e.offsetX - $('.mask').width() / 2
    let y = e.offsetY - $('.mask').height() / 2
    //边界检测
    if (x < 0) x = 0
    if (x > $('.m-show').width() - $('.mask').width()) {
      x = $('.m-show').width() - $('.mask').width()
    }
    if (y < 0) y = 0
    if (y > $('.m-show').height() - $('.mask').height()) {
      y = $('.m-show').height() - $('.mask').height()
    }
    $('.mask').css({
      top: y,
      left: x
    })
    //背景图移动比例
    /**
     *  mask      mask移动
     * ------ == -------
     * glass      bg 移动
     */
    let moveX = x * $('.glass').width() / $('.mask').width()
    let moveY = y * $('.glass').height() / $('.mask').height()
    // console.log('x',moveX,'y',moveY)
    $('.glass>img').css({
      top: -moveY,
      left: -moveX
    })
  })

}



//加入购物车  构造一个商品对象 保存到localstorage中
/**序号	商品图片	商品信息	单价	数量	总价	操作
 * 序号	商品图片	商品信息 如何获取  
 */
function addCart() {
  //判断当前商品是否存储在localstorage
  //如果存在 改变数量
  //如果不存在 生成新商品
  let cartStr = localStorage.getItem('CARTLIST')
  let cartArr = JSON.parse(cartStr) || []
  console.log(cartArr)

  //满足条件的商品
  let oldProduct = cartArr.find(function (item) {
    return item.id == product.id
  })
  console.log(oldProduct)
  let singlePrice = product.price
  if (oldProduct) {
    oldProduct.num++
  console.log(oldProduct.num)

  } else {
    let newProduct = {
      ...product,
      num: 1,
      singlePrice,
      state: false,
    }
    cartArr.push(newProduct)
  console.log(cartArr)

  }
  console.log('创建对象',product)

  localStorage.setItem('CARTLIST', JSON.stringify(cartArr))
  alert('加入购物车成功')
}
//跳转 购物车界面
function onCart() {
  location.href = './cart.html'
}